<template>
  <div class="menu-container">
    <el-menu 
      default-active="2" 
      class="el-menu-vertical-demo" 
      background-color="#fff" 
      text-color="black">
      <div class="demo-type">
        <el-avatar :size="150" :src="state.head_pic" shape="square" @error="true">
          <img src="@/assets/images/logo.jpg" />
        </el-avatar>
      </div>
      <el-menu-item 
        v-for="(item, index) in state.menu" 
        :key="index" 
        @click="selectComponent(item, index)"
        :class="{ 'selected': state.selectedItem === index, 'custom-menu-item': true }">
        <component 
          class="icon" 
          :is="item.icon" 
          :class="{ 'selected-text': state.selectedItem === index }">
        </component>
        <span 
          class="menu-text"
          :class="{ 'selected-text': state.selectedItem === index }">
          {{ item.label }}
        </span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import LOGO from "@/assets/images/logo.jpg"
import { GoPageName } from "@/enums";
import router from "@/router";
import {reactive } from 'vue';


const selectComponent = (component: any, index: number) => {
  state.selectedItem = index
  
  router.push({
    name: 'counselorSettings',
    params:{
      path:component.name
    }
  })
};

const state = reactive({
  menu: [
    {
      name: GoPageName.PERSONALINFO,
      label: GoPageName.PERSONALINFO_ZH,
      icon: 'UserFilled',
    },
    {
      name: GoPageName.RESERVEMANAGER,
      label: GoPageName.RESERVEMANAGER_ZH,
      icon: 'Setting',
    },
    {
      name: GoPageName.ARTICLEMANAGER,
      label: GoPageName.ARTICLEMANAGER_ZH,
      icon: 'Menu',
    },
    {
      name: GoPageName.RESERVESETTING,
      label: GoPageName.RESERVESETTING_ZH,
      icon: 'Setting',
    }
  ],
  head_pic: LOGO,
  selectedItem: -1,
})

</script>

<style scoped>
.menu-container {
  height: 100%;
  overflow: hidden;  /* 防止内容溢出 */
}

.el-menu-vertical-demo {
  height: 100%;
  transition: none !important;  /* 禁用菜单过渡效果 */
}

.icon {
  width: 1em;
  height: 1em;
  margin-right: 8px;
  font-size: 20px;
}

.menu-text {
  font-size: 16px;
  white-space: nowrap;
}

.selected {
  background-color: rgb(230, 247, 255) !important;
}

.selected-text {
  color: rgb(22, 132, 252);
}

.custom-menu-item {
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 20px !important;
  transition: none !important;  /* 禁用菜单项过渡效果 */
}

.custom-menu-item:hover {
  background-color: rgb(230, 247, 255);
}

:deep(.el-menu-item) {
  height: 56px !important;
  line-height: 56px !important;
  transition: none !important;  /* 禁用 Element Plus 的过渡效果 */
}

:deep(.el-menu) {
  border-right: none;
  transition: none !important;  /* 禁用 Element Plus 的过渡效果 */
}

:deep(.el-menu--collapse) {
  transition: none !important;  /* 禁用折叠过渡效果 */
}
</style>
